<script setup lang="ts">
import { Icon } from '@iconify/vue';
import { ElInput } from 'element-plus';
import { ref, onMounted } from 'vue';
import ChatItem from './components/chatItem.tsx';

const inputRef = ref(null);
onMounted(() => {
  inputRef.value.focus();
});
</script>
<template>
  <div class="chat flex h-full">
    <!-- 
      实现一个聊天窗口
      1. 左侧是用户列表
      2. 右侧是聊天内容
      3. 底部是输入框
    -->

    <div class="chat-left w-250px bg-white">
      <div class="chat-left-user py-10px">
        <div class="w-full flex-cc">
          <!-- 渐变色字体 -->
          <div class="text-20px font-500">用户列表</div>
        </div>
        <div v-for="i in 10" :key="i" class="chat-left-user-item hover:bg-blue-1 p-2 mt-1 cursor-pointer">
          <!-- 
            用户信息
            1. 头像 左边
            2. 昵称 中间上
            3. 详情 中间下
            4. 消息数量 头像右上角
            5. 时间 右边
          -->
          <div class="flex">
            <div class="flex-cc relative">
              <img src="" class="h-40px w-40px" />
              <div
                class="absolute text-xs bg-red-500 rounded-3xl px-1 right-0 top-0 translate-x-1/2 translate-y--1/2 text-white"
              >
                99+
              </div>
            </div>
            <div class="flex-1 flex flex-col ml-10px">
              <div class="flex-1 font-size-14px">用户昵称</div>
              <div class="text-gray-400 font-size-12px">用户详情</div>
            </div>
            <div class="text-gray-400 text-xs">{{ new Date().toLocaleTimeString().substring(0, 5) }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="chat-right flex-1 flex flex-col">
      <div class="chat-right-title h-40px bg-white flex-row flex items-center">
        <div class="ml-4 font-size-18px">用户昵称</div>
      </div>
      <div class="chat-right-content flex-1 bg-white">
        <!-- 聊天内容 -->
        <ChatItem :mine="true" avatar="https:///picsum.photos/200/300" content="这是一段聊天内容" />
        <ChatItem :mine="false" avatar="https://picsum.photos/200/300" content="这是一段聊天内容" />
        <ChatItem :mine="true" avatar="https://picsum.photos/200/300" content="这是一段聊天内容" />
      </div>
      <!-- 聊天工具 -->
      <div class="chat-right-tools h-30px bg-white flex-row flex">
        <!-- 笑脸 文件夹 剪刀 -->
        <div
          v-for="i in ['ant-design:smile-outlined', 'ant-design:folder-outlined', 'ant-design:scissor-outlined']"
          :key="i"
          class="h-30px w-30px flex-cc cursor-pointer"
        >
          <Icon :icon="i" width="20px" height="20px" />
        </div>
      </div>
      <div class="chat-right-input h-150px bg-white flex relative">
        <!-- 聊天输入框 -->
        <ElInput
          type="textarea"
          ref="inputRef"
          class="textarea-no-radius w-full h-full border-none! outline-none! rounded-none! resize-none! font-500 font-size-18px"
          :show-word-limit="false"
          maxlength="200"
          resize="none"
          placeholder="Please input"
          input-style="height: 100%"
        ></ElInput>
        <a-button
          class="absolute right-10px bottom-10px rounded-none! w-100px bg-gray-1 border-none! text-blue outline-none! active:bg-blue-1"
          >发送</a-button
        >
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.chat {
  &-left {
    border-right: 1px solid var(--el-menu-border-color);
  }
  &-right {
    &-content {
      overflow-y: auto;
    }
    &-title {
      border-bottom: 1px solid var(--el-menu-border-color);
    }
    &-tools {
      border-top: 1px solid var(--el-menu-border-color);
    }
  }
}
</style>

<style>
.textarea-no-radius .el-textarea__inner {
  border-radius: 0 !important;
  box-shadow: none !important;
}
</style>
